<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset=UTF-8"/>
        <title>Login - MornTea</title>
        <link rel="icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" type="text/css" href="style/style.css" />
        <script type="text/javascript" src="script/jquery.min.js"></script>
        <script type="text/javascript" src="script/jquery.validate.min.js"></script>
        <script type="text/javascript">
            function initDocument() {
                $("#loginForm").validate({
                    rules: {
                        username: {
                            required: true,
                            minlength: 4
                        }
                    },
                    messages: {
                        username: {
                            required: "Can not be empty.",
                            minlength: "At least 4 bytes."
                        }
                    }
                });
            }
            $(document).ready( initDocument );
        </script>
</head>
    <body>
        <div id="documentField">
            <div id="logoField">
            </div>
            <div id="shortcutField">
            	<div id="shortcutContentField">
	                <div id="menuField">
		                <a id="home" href="index.html">Home</a>
		                <a id="product" href="product.html">Product</a>
		                <a id="download" href="download.html">Download</a>
		                <a id="about" href="about.html">About</a>
		                <a id="contact" href="contact.html">Contact</a>
	                </div>
	                <div id="userInfoField">
	           		</div>
           		</div>
            </div>
            <div id="loginField" class="contentField">
                <div id="loginTitleField" class="contentTitleField">
                    Login
                </div>
                <form id="loginForm" class="contentContentField" action="/login" method="post">
                    <div id="usernameField" class="textInputField">
                        <label for="username">username: </label>
                        <input id="username" class="textInput" type="text" name="username" value="" tabindex="1">
                    </div>
                    <div id="passwordField" class="passwordInputField">
                        <label for="password">password: </label>
                        <input id="password" class="textInput" type="password" name="password" value="" tabindex="2">
                        <a id="forget" class="link" href="forget.html">Forgot Password</a>
                    </div>
                    <div id="submitField" class="buttonInputField">
                        <input id="submit" class="firstButton" type="submit" name="submit" value="Login" tabindex="3">
                        <input id="reset" class="button" type="reset" name="reset" value="Reset" tabindex="4">
                        <a id="register" class="link" href="register.html">Register Now</a>
                    </div> 
                </form>
            </div>
        </div>
    </body>
</html>